<template>
	<view class="steps">
		<view
			class="arrow"
			:style="{
				left: percent + '%'
			}"
		>
			<u-icon name="arrow-down-fill" color="#d1d1d1"></u-icon>
		</view>
		<view class="flex align-center">
			<view
				class="step"
				v-for="(item, index) in steps"
				:style="{
					background: item.color
				}"
			></view>
		</view>
		<view class="flex align-center" v-if="size == 'lg'">
			<view
				class="step_text"
				v-for="(item, index) in steps"
				:style="{
					color: item.color
				}"
			>
				{{ item.text }}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'dmStep',
	props: {
		size: {
			type: String,
			default: 'default'
		},
		//收缩压
		systolic_pressure: {
			type: Number,
			default: 120
		},
		//舒张压
		diastolic_pressure: {
			type: Number,
			default: 80
		}
	},
	computed: {
		//计算血压等级 最高收缩压240，舒张压130
		percent() {
			let percent = 0,
				pre1 = 0,
				pre2 = 0,
				num = 0;
			if (this.systolic_pressure >= 180 || this.diastolic_pressure >= 110) {
				pre1 = (this.systolic_pressure - 180) / 60;
				pre2 = (this.diastolic_pressure - 110) / 20;
				num = 5;
			} else if (this.systolic_pressure >= 160 || this.diastolic_pressure >= 100) {
				pre1 = (this.systolic_pressure - 160) / 20;
				pre2 = (this.diastolic_pressure - 100) / 10;
				num = 4;
			} else if (this.systolic_pressure >= 140 || this.diastolic_pressure >= 90) {
				pre1 = (this.systolic_pressure - 140) / 20;
				pre2 = (this.diastolic_pressure - 90) / 10;
				num = 3;
			} else if (this.systolic_pressure >= 130 || this.diastolic_pressure >= 85) {
				pre1 = (this.systolic_pressure - 130) / 10;
				pre2 = (this.diastolic_pressure - 85) / 5;
				num = 2;
			} else if (this.systolic_pressure >= 90 || this.diastolic_pressure >= 60) {
				pre1 = (this.systolic_pressure - 90) / 40;
				pre2 = (this.diastolic_pressure - 60) / 25;
				num = 1;
			} else if (this.systolic_pressure < 90 || this.diastolic_pressure < 60) {
				pre1 = 0.5;
				pre2 = 0.5;
				num = 0;
			}
			let pre = pre1 > pre2 ? pre1 : pre2;
			console.log('pre', pre);
			percent = (1 / 6) * (num + (pre > 1 ? 1 : pre));

			return percent * 100;
		}
	},
	data() {
		return {
			steps: [
				{
					color: '#56a6fb',
					text: '偏低'
				},
				{
					color: '#59be58',
					text: '正常'
				},
				{
					color: '#ffbf0e',
					text: '正常高值'
				},
				{
					color: '#ff9600',
					text: '轻度'
				},
				{
					color: '#fe6f09',
					text: '中度'
				},
				{
					color: '#e93c42',
					text: '重度'
				}
			]
		};
	}
};
</script>

<style scoped lang="scss">
.steps {
	position: relative;
	width: 100%;
	.arrow {
		position: absolute;
		top: -30upx;
		left: 0;
		transform: translateX(-50%);
	}
	.step {
		flex: 1;
		height: 10upx;

		border-radius: 50upx;
		& + .step {
			// margin-left: 2upx;
		}
	}
	.step_text {
		flex: 1;
		text-align: center;
		font-size: 20upx;
		margin-top: 10upx;
		& + .step_text {
			// margin-left: 2upx;
		}
	}
}
</style>
